<template>
<!-- 动态 attribute 名 v-bind:[attr]="值" -->
<!-- 
    input事件 是原生的表单元素事件，当输入框的值发生变化时，实时触发。
 -->
    <input v-bind:value="value" class="hmInput" :[attr]="{ success: isOk,err: isOk===false }" 
    type="text" @blur="blurFn" @input="inputFn">
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            required: true
        },
        reg:{
            type: RegExp, // 类型为正则表达式
            default: ()=>{ // 当传入的变量是对象或者正则表达式的时候，设置默认值需要使用函数的方式设置
                return /^.{1,}$/  // 表示输入框不能空
            }
        }
    },
    data(){
        return {
            isOk: true,
            attr: ""
        }
    },
    created(){
        // 动态设置isOk属性的值，
        // 判断输入框中默认中的正确与否
        if(this.reg.test(this.value)){
            this.isOk = true
        }else{
            this.isOk = false
        }
    },
    methods: {
        // 失去焦点时触发
        blurFn(){
            this.attr = "class";
            // console.log(this.value);
            // let reg = /^1[3,4,5,6,7,8,9]\d{9}$/
            if(this.reg.test(this.value)){
                // 用户输入正确，给输入框添加成功的类名
                this.isOk = true;
            }else{
                // 用户输入错误，给输入框添加失败的类名
                this.isOk = false;
            }
        },
        inputFn(e){
            // 通知父组件修改username的值 并赋值为输入框的内容
            // console.log(40);
            // 如何获取到输入框的内容呢？
            // 答：事件对象（e.target.value）
            // console.log(44,e.target.value);
            // 子传父
            // this.$emit("sendData", e.target.value);
            this.$emit("input", e.target.value);
        }
    }
}
</script>

<style lang="less" scoped>
.hmInput{
    border: none;
    border-bottom: 2px solid #c3c3c3;
    color: #c3c3c3;
    font-size: 16px;
    line-height: 2;
    width: 100%;
}
.success{
    border-bottom: 2px solid green;
    color: green;
}
.err{
    border-bottom: 2px solid red;
    color: red;
}
</style>